<template>
  <div class="monitor_page">
 <!-- table -->
   <el-card class="monitor_page-left" :class="{toggle: isToggleStatus}" shadow="hover">
     <div class="monitor_page-filter">
     <el-date-picker
       v-show="!isToggleStatus"
       style="width:100%;min-width:240px"
       size="small"
       value-format="timestamp"
       v-model="timerArray"
       type="datetimerange"
       :picker-options="pickerOptions"
       :clearable="false"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期" >
       </el-date-picker>

     </div>
     <div class="monitor_page-filter flex-between" :class="{setMarginTop: isToggleStatus}">
       <div class="monitor_page-filter-left">
         <button class="toggle_wrap" @click="toggleStatus">
           <i class="el-icon-s-fold" :class="{rotate: isToggleStatus}"></i>
         </button>
         <el-button
           v-show="!isToggleStatus"
           size="small"
           @click="confirmDelete"
           icon="el-icon-delete-solid"
           v-if="isAuthority"
           type="danger">删除</el-button>
         <el-button
           size="small"
           plain
           v-if="isAuthority"
           type="primary"
            @click="showMonitorRemarkDialog">说明
         </el-button>
       </div>
       <el-button
         size="small"
         type="primary"
         class="common_btn-defalut"
         icon="el-icon-search"
         @click="form.page=1;$emit('update')">搜索</el-button>
     </div>
     <!-- table -->
     <el-table
       v-show="!isToggleStatus"
       :data="tableList"
       border
       :height="500"
       @selection-change="handleSelectionChange"
       ref="multipleTable"
       tooltip-effect="dark">
       <el-table-column  type="selection" width="28">
       </el-table-column>
       <el-table-column prop="createTime" label="数据采集时间" width="135">
         <template slot-scope="scope">
           {{scope.row.createTime | formatTimer }}
         </template>
       </el-table-column>
       <el-table-column prop="relativeValue" label="位移值(mm)" width="85">
       </el-table-column>
       <el-table-column prop="relativePullValue" label="拉力值(kg)" width="85">
       </el-table-column>

     </el-table>
     <!-- 分页器 -->
     <el-pagination
       v-show="!isToggleStatus"
       :disabled="isToggleStatus"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="form.page"
       :page-size="form.pageSize"
          :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
       :total="form.total">
     </el-pagination>
   </el-card>
      <!-- 绘图部分 -->
      <div class="monitor_page-right">

        <el-card class="card_echarts" shadow="hover">
          <echarts-shift ref="echartsChange"></echarts-shift>
        </el-card>
      </div>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>
  </div>
</template>

<script>
import EchartsShift from '../monitor-echarts/base/echarts-9-shift'
import ItemMixins from './item.mixins'

export default {
  mixins: [ItemMixins],
  components: { EchartsShift },
  data () {
    return {
      // 当前的图表钩子
      chartsName: ['echartsChange'],
      isShowDialog:false
    }
  }
}
</script>

<style scoped="scoped" lang="less">
 @import url('./commom.less');
// 还需自定义的css
  .card_echarts {
    height: 680px;
  }

  .monitor_page-left {
    // 15px未margin
    height: 680px;
  }
 .el-card{
   background: transparent;
 }
</style>
